<template>
   <div>
       <!-- 头部 -->
        <mt-header fixed title="Vue内容管理系统"></mt-header>
       <div class="back" v-if='isShow'>
            <a @click="goBack">&lt;返回</a>
        </div>
      
        <router-view>
          

          
        </router-view>

       <!-- 底部 -->
       <nav class="mui-bar mui-bar-tab">
      <router-link class="mui-tab-item" to="/home">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
      </router-link>
      <router-link class="mui-tab-item"to="/member">
        <span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
        <span class="mui-tab-label">消息</span>
      </router-link>
      <router-link class="mui-tab-item" to="/shopcart">
        <span class="mui-icon mui-icon-contact"></span>
        <span class="mui-tab-label">通讯录</span>
      </router-link>
      <router-link class="mui-tab-item" to="/settings">
        <span class="mui-icon mui-icon-gear"></span>
        <span class="mui-tab-label">设置</span>
      </router-link>
    </nav>
   </div>
</template>


<style scoped> 

  .back{

    position: fixed;
    left: 10px;
    top: 10px;
    z-index: 1;
  }
  .back a{
    color: white;
    font-size: 16px;

  }
</style>
<script>
  
  export default {
     data(){


      return {
         
         isShow:false

      };
     },

     created(){
      window.addEventListener('load', this.windowOnLoad);
     },
        methods:{
            goBack(){
                this.$router.go(-1);
            },
            windowOnLoad(){
                if(this.$route.path.toLowerCase()=='/home'||
                        this.$route.path.toLowerCase()=='/member'||
                        this.$route.path.toLowerCase()=='/shopcart'||
                        this.$route.path.toLowerCase()=='/settings'){
                    this.isShow = false;
                }else{
                    this.isShow = true;
                }
            }
        },
        watch: {
            '$route' (to, from) {
                // 对路由变化作出响应...
                if(to.path.toLowerCase()=='/home'||
                        to.path.toLowerCase()=='/member'||
                        to.path.toLowerCase()=='/shopcart'||
                        to.path.toLowerCase()=='/settings'){
                    this.isShow = false;
                }else{
                    this.isShow = true;
                }
            }
        }
  }


</script>